<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>这是第二节课</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			canvas {
				width: 500px;
				height: 500px;
				border: 1px red solid;
			}

			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;

			}
		</style>
	</head>
	<body>
		<div class="container">
			<canvas id="canvas" width="500px" height="500px"></canvas>
		</div>
	</body>

	<script>
		window.onload = function() {
			let yCanvas = document.getElementById('canvas');

			console.dir(yCanvas);

			let yPen = yCanvas.getContext("2d");

			console.dir(yPen);

			yPen.beginPath();
			//arcds
			//角度无论如何都是顺时针，不管最后是true 还是false
			// yPen.arc(400,300,80,0,90*Math.PI/180); //画的时候都是顺时针画的，最后封闭的时候true/flalse 决定是优弧还是劣弧      默认false，
			// yPen.closePath(); 
			// yPen.arc(250, 150, 80, 0, 360 * Math.PI / 180, false); //
			// yPen.closePath(); //封闭曲线
			// yPen.stroke();

			// // moveTo(330, 400);
			// yPen.beginPath();
			// yPen.arc(250, 330, 100, 0, 180 * Math.PI / 180, true);
			// yPen.closePath(); //封闭曲线
			// yPen.strokeStyle = "black";
			// yPen.stroke(); //渲染(一次即可)
			
			
			
			
			// yPen.moveTo(50, 50);
			// yPen.lineTo(200, 50);
			// yPen.arcTo(250, 50, 250, 100, 50);
			// yPen.lineTo(250, 250);

			// yPen.moveTo(250, 250);
			// yPen.lineTo(250, 250);
			// yPen.arcTo(250, 300, 200, 300, 50);
			// yPen.lineTo(50, 300);

			// yPen.moveTo(50, 300);
			// yPen.lineTo(50, 300);
			// yPen.arcTo(0, 300, 0, 250, 50);
			// yPen.lineTo(0, 100);

			// yPen.moveTo(0, 100);
			// yPen.lineTo(0, 100);
			// yPen.arcTo(0, 50, 50, 50, 50);
			// yPen.lineTo(50, 50);



			//封装

			creatRound(yPen,200,100,50,50,20);
			
			function creatRound(pen,width,height,x,y,r){
			pen.moveTo(x+r,y);
			pen.lineTo(x+width-r,y);
			pen.arcTo(x+width,y,x+width,y+r,r);
			pen.lineTo(x+width,y+height-r);
			pen.arcTo(x+width,y+height,x+width-r,y+height,r);
			pen.lineTo(x+r,y+height);
			pen.arcTo(x,y+height,x,y+height-r,r);
			pen.lineTo(x,y+r);
			pen.arcTo(x,y,x+r,y,r);
			yPen.stroke();
			
			
			
			
			}
			
			
			
			
			






		}
	</script>
</html>
